<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
</head>
<body>

  <script>
    /*
      回顾

      ajax
        + 是一个 前后端 交互的手段
        + 前端可以通过 ajax 向后端发起一个请求
        + 等待后端响应结果

      1. 基本步骤(掌握)
        1-1. 创建 ajax 对象
          const xhr = new XMLHttpRequest()
        1-2. 配置本次请求的信息
          xhr.open(请求方式, 请求地址, 是否异步)
        1-3. 发送本次请求
          xhr.send()
        1-4. 配置接受响应的事件
          xhr.onload = function () {}

      2. 同步异步问题(了解)
        + 当你发送同步请求的时候, 因为先执行 send() 后执行事件绑定
          => 导致你的事件绑定的时候, 请求已经完成了
          => 永远不会触发请求完成事件了
        + 如果发送同步请求, 最好按照 1 2 4 3 的步骤书写
          如果发送异步请求, 1 2 4 3 和 1 2 3 4 的步骤无所谓
        + 结论(记住)
          => 不管同步还是异步, 以后书写 ajax 步骤, 都按照 1 2 4 3 的步骤书写

      3. 请求方式(了解)
        3-1. 常见的请求方式
          => GET
          => POST
          => PUT
          => PATCH
          => DELETE
          => HEAD
          => OPTION
          => CONNECT
        3-2. GET(系) 和 POST(系) 的区别(记住)
          => 携带参数的位置
            -> GET 在地址后面携带
            -> POST 在请求体携带
          => 携带参数的大小
            -> GET 2KB 左右
            -> POST 理论上无限带, 但是可以被服务器限制
          => 携带参数的格式
            -> GET 只能是查询字符串
            -> POST 可以是很多种格式, 但是请求之前需要提前说明
          => 安全性
            -> GET 明文发送, 相对不安全
            -> POST 暗文发送, 相对安全

      4. 发送带有参数的请求
        4-1. 带有参数的 GET 请求
          const xhr = new XMLHttpRequest()
          xhr.open('GET', '/xxxx?key=value&key2=value2')
          xhr.onload = () => {}
          xhr.send()
        4-2. 带有参数的 POST 请求
          const xhr = new XMLHttpRequest()
          xhr.open('POST', '/xxxx')
          xhr.onload = () => {}
          // 提前在请求头内设置一下本次请求的请求体格式
          xhr.setRequestHeader('content-type', 'application/x-www-form-urlencoded')
          xhr.send('key=value&key2=value2')
        + 说明
          => 你传递的请求体数据格式 和 你设置的请求头数据格式 配套就行
          => 'key=value&key=value2'        'application/x-www-form-urlencoded'
          => '{ "name": "Jack" }'          'application/json'
          => 文件(图片, 视音频, ...)         'mutilpart/form-data'
        + 说明
          => xhr.setRequestHeader() 不是专门设置请求体格式的
          => 是专门用来书写请求头(对本次请求的描述)信息
          => 里面设置的某一个信息, 是请求体数据格式信息
    */
  </script>
</body>
</html>
